 * {
     margin: 0;
     padding: 0;
     list-style: none;
     text-decoration: none;
 }

 body {
     width: 100%;
     height: 100%;
 }

 /* 图片的外层范围，主要用于鼠标经过事件 */
 .picture {
     top: 50px;
     left: 300px;
     width: 1200px;
     height: 700px;
     display: flex;
     position: relative;
 }

 /* 进入网页时图片向上和向下移动 */
 .pic-item-down,
 .pic-item-up {
     position: relative;
     height: 500px;
     width: 200px;
     /* border: 1px solid black; */
     margin-left: 30px;
     margin-top: -600px;
     opacity: 0;
     transition: all 1s;
     /* z-index: -1; */
 }

 .pic-item-active {
     margin-top: 0;
     opacity: 1;
 }

 .pic-item {
     transition: all 1s;
 }

 /* 进入网页动画快结束时，图片会全部偏转一定角度 */
 .pic-active {
     transform: perspective(800px) rotateY(45deg);
     opacity: 1;
 }

 /* 点击图片的“了解更多”一部分图片向左移动 */
 .pic-active2 {
     transform: perspective(800px) rotateY(0);
     transform: translateX(-1500px);
 }

 /* 另一部分图片向右移动 */
 .pic-active3 {
     transform: perspective(800px) rotateY(0);
     transform: translateX(1500px);
 }

 .pic-item-up {
     margin-top: 800px;
 }

 .picture img {
     position: relative;
     height: 450px;
     width: 204.5px;
     top: 100px;
     display: inline-block;
     border-radius: 15px;
     transition: all 1s;
     z-index: 1;
     -webkit-box-reflect: below 5px linear-gradient(to bottom, rgb(0, 0, 0, 0.0), rgb(0, 0, 0, 0.4));
     pointer-events: auto;
     cursor: pointer;
 }

 /* 点击图片图片旋转且放大 */
 .img-active {
     transform: perspective(800px) rotateY(360deg) scale(1.5);
     z-index: 2;
 }

 /* 描述称号和描述名字 */
 .des-nick,
 .des-name {
     float: left;
     position: absolute;
     z-index: 10;
     writing-mode: vertical-rl;
     color: white;
     font: bold 35px "Microsoft YaHei";
     margin-left: -30px;
     margin-top: -70px;
     opacity: 0;
     transition: all 1s;
     cursor: pointer;
 }

 .des-name {
     height: 200px;
     margin-top: 130px;
     margin-left: 190px;
 }

 .des-active {
     opacity: 1;
     margin-top: 20px;
 }

 /* 了解更多按钮 */
 .more {
     position: relative;
     left: 50px;
     margin-top: 170px;
     z-index: 5;
     width: 100px;
     height: 30px;
     border-radius: 20px;
     border: transparent;
     opacity: 0;
     cursor: pointer;
     display: none;
     transition: all .5s;

 }

 .more:hover {
     opacity: 1;
 }

 .more-active {
     display: block;
     opacity: 0.6;
     margin-top: 130px;
 }

 .tab {
     z-index: 10;
     position: absolute;
     left: 500px;
     top: 200px;
 }

 .tab-active {
     transform: translateY(-850px);
 }

 /* 心海部分 */
 .tab-xinhai,
 .tab-falushan,
 .tab-shenli,
 .tab-naxida,
 .tab-hutao {
     position: relative;
     z-index: 10;
     height: 550px;
     width: 800px;
     left: -50px;
     top: 800px;
     background-repeat: no-repeat;
     background-image: linear-gradient(-225deg, #f49fff 0%, #9faeff 48%, #71e5ff 100%);
     background-color: skyblue;
     background-position: 50% 0%;
     backdrop-filter: blur(10px);
     border-radius: 10px;
     border: 5px solid white;
     box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.539);
     display: none;
     transition: all .5s;
 }

 .tab-xinhai::before,
 .tab-falushan::before,
 .tab-shenli::before,
 .tab-naxida::before,
 .tab-hutao::before {
     height: 100%;
     width: 100%;
     content: "";
     position: absolute;
     z-index: 12;
     background-position: 50% 0%;
     background-image: url(./image/详细页面-心海.png);
     background-size: cover;
     background-repeat: no-repeat;
 }

 .tab-xinhai-name,
 .tab-falushan-name,
 .tab-shenli-name,
 .tab-naxida-name,
 .tab-hutao-name {
     z-index: 11;
     position: relative;
     display: block;
     font: bolder 300px "Microsoft YaHei";
     text-align: center;
     padding-left: 40px;
     line-height: 350px;
     letter-spacing: 20px;
     color: white;
 }

 .tab-xinhai-des,
 .tab-falushan-des,
 .tab-shenli-des,
 .tab-naxida-des,
 .tab-hutao-des {
     display: block;
     position: relative;
     z-index: 13;
     width: 600px;
     height: 80px;
     margin: 80px auto;
     font: 20px "";
     color: white;
     border-radius: 10px;
     backdrop-filter: blur(50px);
 }

 .close {
     position: relative;
     z-index: 12;
     width: 30px;
     height: 30px;
     float: right;
     margin-right: 5px;
     margin-top: 5px;
     border-radius: 50px;
     border: transparent;
     font: 12px "";
     text-align: center;
     background-color: white;
     cursor: pointer;
     box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.212);
 }

 .close:hover {
     background-color: #dfdfdf;
 }

 /* 珐露珊部分 */
 .tab-falushan {
     background-image: linear-gradient(-225deg, #9ffdff 0%, #9fffcd 48%, #76ff71 100%);
 }

 .tab-falushan::before {
     background-image: url(./image/详细页面-珐露珊.png);
 }

 .tab-falushan-name {
     font: bolder 200px "Microsoft YaHei";
 }

 .tab-falushan-des {
     margin-top: 100px;
     height: 140px
 }

 /* 神里绫华部分 */
 .tab-shenli {
     background-image: linear-gradient(-225deg, #ae9fff00 0%, #9fbaff 48%, #71f1ff 100%);
 }

 .tab-shenli::before {
     background-image: url(./image/详细页面-神里绫华.png);
 }

 .tab-shenli-name {
     font: bolder 150px "Microsoft YaHei";
 }

 .tab-shenli-des {
     margin-top: 160px;
     height: 160px;
 }

 /* 纳西妲部分 */
 .tab-naxida {
     background-image: linear-gradient(-225deg, #ae9fff00 0%, #9fffcf 48%, #a7ff71 100%);
 }

 .tab-naxida::before {
     background-image: url(./image/详细页面-纳西妲.png);
 }

 .tab-naxida-name {
     font: bolder 200px "Microsoft YaHei";
 }

 .tab-naxida-des {
     margin-top: 90px;
     height: 160px;
     color: rgb(115, 115, 115);
 }

 /* 胡桃部分 */
 .tab-hutao {
     background-image: linear-gradient(-225deg, rgb(255, 159, 244)0 0%, #ff9fc2 48%, #ff7171 100%);
 }

 .tab-hutao::before {
     background-image: url(./image/详细页面-胡桃.png);
 }

 .tab-hutao-des {
     margin-top: 20px;
     height: 150px;
 }